import { defineStore } from 'pinia'

export const useAppStore = defineStore('app', {
  state: () => ({
    sidebar: {
      opened: localStorage.getItem('sidebarStatus') 
        ? !!+localStorage.getItem('sidebarStatus') 
        : true,
      withoutAnimation: false
    },
    device: 'desktop',
    settings: {
      title: '货物监控系统',
      showLogo: true,
      tagsView: true,
      fixedHeader: true,
      showSettings: false
    },
    language: localStorage.getItem('locale') || 'zh-CN',
    // 缓存的视图
    cachedViews: [],
    // 已访问的视图标签
    visitedTags: [],
    // 布局相关
    layout: {
      layoutMode: 'Default', // Default, Classic, Streamline
      menuCollapse: false,
      shrink: false
    },
    // 主题
    theme: {
      menuBg: '', // 菜单背景色
      menuText: '', // 菜单文字颜色
      menuActiveText: '' // 菜单激活文字颜色
    }
  }),
  
  actions: {
    toggleSidebar() {
      this.sidebar.opened = !this.sidebar.opened
      this.sidebar.withoutAnimation = false
      if (this.sidebar.opened) {
        localStorage.setItem('sidebarStatus', '1')
      } else {
        localStorage.setItem('sidebarStatus', '0')
      }
    },
    closeSidebar(withoutAnimation = false) {
      localStorage.setItem('sidebarStatus', '0')
      this.sidebar.opened = false
      this.sidebar.withoutAnimation = withoutAnimation
    },
    toggleDevice(device) {
      this.device = device
    },
    changeSetting(key, value) {
      if (Object.prototype.hasOwnProperty.call(this.settings, key)) {
        this.settings[key] = value
      }
    },
    // 缓存视图
    addCachedView(view) {
      if (this.cachedViews.includes(view.name)) return
      if (view.meta && view.meta.keepAlive) {
        this.cachedViews.push(view.name)
      }
    },
    removeCachedView(view) {
      const index = this.cachedViews.indexOf(view.name)
      if (index > -1) {
        this.cachedViews.splice(index, 1)
      }
    },
    resetCachedView() {
      this.cachedViews = []
    },
    // 标签视图
    addVisitedTag(view) {
      if (this.visitedTags.some(v => v.path === view.path)) return
      
      const tag = {
        name: view.name,
        path: view.path,
        query: view.query,
        params: view.params,
        meta: { ...view.meta }
      }
      
      this.visitedTags.push(tag)
    },
    removeVisitedTag(view) {
      for (const [i, v] of this.visitedTags.entries()) {
        if (v.path === view.path) {
          this.visitedTags.splice(i, 1)
          break
        }
      }
    },
    removeOtherVisitedTags(view) {
      this.visitedTags = this.visitedTags.filter(v => {
        return v.path === view.path
      })
    },
    removeAllVisitedTags() {
      this.visitedTags = []
    },
    // 设置布局
    setLayoutMode(mode) {
      this.layout.layoutMode = mode
    },
    setLayout(key, value) {
      if (Object.prototype.hasOwnProperty.call(this.layout, key)) {
        this.layout[key] = value
      }
    },
    // 设置主题
    setTheme(key, value) {
      if (Object.prototype.hasOwnProperty.call(this.theme, key)) {
        this.theme[key] = value
      }
    },
    // 设置语言
    setLanguage(locale) {
      this.language = locale
      localStorage.setItem('locale', locale)
      document.querySelector('html').setAttribute('lang', locale)
    }
  },
  persist: {
    enabled: true,
    strategies: [
      {
        key: 'app-store',
        storage: localStorage,
        paths: ['settings', 'layout', 'theme', 'visitedTags', 'language']
      }
    ]
  }
})